<template>
	<view class="listLi">
		<view class="state">{{state}}</view>
		<van-card class="card">
			<template #title>
				<p class="titleCard"><text class="text">{{tag}}</text>
					<view class="titleCardOver">{{title}}</view>
				</p>
			</template>
			<template #thumb>
				<image class="thumb" src="../../static/images/Shop/service.png" mode="widthFix"></image>
			</template>
			<template #price>
				<text class="priceCard">*{{num}}</text>
			</template>
			<template #num>
				<view class="numCard">
					<text>{{price}} <text class="unit">USDT</text></text>
				</view>
			</template>
		</van-card>
		<view class="cardBottom" v-if="stateNum===3? false:true">
			<!-- 使用includes进行判断如果有数组中的某一项就进行显示 否则相反 -->
			<view class="Cancel" v-if="[1].includes(stateNum)" @click="Cancel(id)">
				取消订单
			</view>
			<view class="EDITOR">
				<view class="edit" v-if="[1].includes(stateNum)" @click='edit(id)'>修改地址</view>
				<view class="search edit" v-if="[4, 2].includes(stateNum)" @click='search(id)'>查看物流</view>
				<view class="edit" v-if="[5].includes(stateNum)" @click='Delete(id)'>删除订单</view>
				<view class="payment" v-if="[1].includes(stateNum)" @click='payment(id)'>立即支付</view>
				<view class="payment" v-if="[4, 2].includes(stateNum)" @click='receiveGoods(id)'>立即收货</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { onShow } from '@dcloudio/uni-app';
	import { defineProps, ref } from 'vue'
	// 传值的接收者 
	const props = defineProps({
		id: {
			type: [Number, String]
		},
		title: {
			type: String,
		},
		image: {
			type: String,
		},
		state: {
			type: String,
		},
		tag: {
			type: String,
		},
		price: {
			type: [Number, String],
		},
		num: {
			type: [Number, String],
		},
	})
	// 定义一个状态转换的变量，进行判断的数据
	let stateNum = ref(0)
	// 页面展示时促发
	onShow(() => {
		/*
		switch 判断该组件是哪一种状态，然后进行变量数值编码的转换
			1--->代表的是 '等待买家付款'
			2--->代表的是 '等待平台发货'
			3--->代表的是 '平台已发货'
			4--->代表的是 '交易完成'
			5--->代表的是 '交易关闭'
		 */
		switch (props.state) {
			case '等待买家付款':
				stateNum.value = 1
				break;
			case "等待平台发货":
				stateNum.value = 2
				break;
			case "平台已发货":
				stateNum.value = 3
				break;
			case "交易完成":
				stateNum.value = 4
				break;
			case "交易关闭":
				stateNum.value = 5
				break;
			default:
				console.log('订单错误');
		}
	})
	// 取消订单时触发函数
	const Cancel = (id : number | string) : void => {
		console.log('取消订单----id', id)
	}
	// 取消订单时触发函数

	const payment = (id : number | string) : void => {
		console.log('支付----id', id)
		uni.navigateTo({
			url: '/subdue/duePag/index?id=' + id
		})
	}
	// 取消订单时触发函数

	const edit = (id : number | string) : void => {
		console.log('修改----id', id)
	}
	// 取消订单时触发函数

	const search = (id : number | string) : void => {
		console.log('查看物流----id', id)
	}
	const Delete = (id : number | string) : void => {
		console.log('删除订单----id', id)
	}
	const receiveGoods = (id : number | string) : void => {
		const url = ``
		console.log('确认收获----id', id)
		// uni.navigateTo({
		// 	url: '/subdue/duePag/index?id=' + id
		// })
	}
</script>

<style lang="scss" scoped>
	.listLi {
		// height: 369px;
		width: 686px;
		background: #2A2B2E;
		border-radius: 16px;
		margin: 0 auto;
		margin-bottom: 24px;
		box-sizing: border-box;
		padding: 0 30px 0 32px;

		.state {
			padding-top: 24px;
			box-sizing: border-box;
			height: 72px;
			font-size: 28px;
			text-align: right;
			color: #F8444D;
		}

		.card {
			padding-bottom: 23px;
			--van-card-padding: 0;
			--van-card-background: block;

			.titleCard {
				width: 400px;

				align-items: center;
				display: flex;
				height: 45px;
				padding-top: 25px;
				font-size: 32px;
				color: white;

				.text {
					margin-right: 8px;
					white-space: nowrap;
					font-size: 20px;
					border: 1px solid #7F7F81;
					padding: 0 10px;
					height: 32px;
					line-height: 32px;
					display: inline-block;
					color: #ffffff;
					text-align: center;
					border-radius: 16px;
				}

				.titleCardOver {
					width: 400px;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}

			.thumb {
				width: 160px;
				height: 160px;
			}

			.numCard {
				color: white;
				font-size: 32px;

				.unit {
					font-size: 24px;
				}
			}

			.priceCard {
				color: #6c6c6e;
				font-size: 24px;

			}
		}

		.cardBottom {
			position: relative;
			border-top: 1px solid #979797;
			height: 108px;
			font-size: 28px;
			color: white;

			.Cancel {
				position: absolute;
				top: 50%;
				left: 0;
				transform: translateY(-50%);
				color: white;
			}

			.EDITOR {
				position: absolute;
				top: 50%;
				right: 0;
				width: 344px;
				transform: translateY(-50%);
				display: flex;
				justify-content: right;

				.edit {
					border: 1px solid #878889;
					background-color: transparent;
					color: white;
					padding: 14px 28px;
					font-size: 26px;
					box-sizing: border-box;
					border-radius: 10px;
					margin-right: 17px;
				}

				.payment {
					color: white;
					background-color: #4e47ff;
					border: 0;
					border-radius: 10px;
					padding: 14px 28px;
					font-size: 26px;
				}
			}
		}
	}
</style>